<template>
	<view class="cate_main">
		<view @click="selectClick(item)" 
			:class="['cate_item',currentSelect && currentSelect.pk_id == item.pk_id?'is_check':'']" 
			v-for="(item, index) in dataList" :key="index">
		{{ item.name }}
		</view>
	</view>
</template>

<script>
export default {
	props: {
		dataList: {
			type: Array,
			default: []
		},
		currentSelect:{
			type:Object,
			default:()=>{
				return {}
			}
		}, // 当前选中的项
		levelIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},

	mounted() {},

	methods: {
		selectClick(item) {
			this.$emit('change', { item: item, index: this.levelIndex });
		}
	}
};
</script>

<style scoped lang="scss">
.cate_main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 10rpx;
	.cate_item {
		border: 1px solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 2rpx 14rpx;
		margin-top: 30rpx;
		margin: 30rpx 20rpx 0;
		&.is_check{
			border-color: var(--color);
			color: var(--color);
		}
	}
}
</style>
